<template>
    <sub-box class="box" v-loading="loading">
        <breadcrumb :title="'申请详情'">
            <!--            <el-button size="small" type="primary" @click="submit">提交申请</el-button>-->
        </breadcrumb>
        <div class="department">
            <span>申请部门</span>
            <el-select v-model="deptType" placeholder="相应部门名称" class="select ml10" size="small">
                <el-option
                    v-for="item in deptList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                </el-option>
            </el-select>
        </div>
        <div class="nodbData" v-if="noDbData">
            本部门未拥有数据库，
            <el-link @click="goLink">前往添加</el-link>
        </div>
        <div v-if="offLineFlag">
            <ul class="ul-box" v-if="orderDetail&&orderDetail.selfSysParam&&orderDetail.selfSysParam[0]">
                <li v-for="(item,index) in list" :key="index" v-if="index <3 || (index >=3&&selfSysShowMore)">
                    <el-checkbox v-model="item.checked" class="checkbox"></el-checkbox>
                    <span><b>{{item.sysName}}</b></span>
                    <div class="ip-a">
                        <span>已选{{item.choiceIpList.length}}个ip地址</span>
                        <el-link type="primary" @click="openIp(item)" class="button">查看
                        </el-link>
                    </div>
                    <div class="ip-b">
                        <p v-for="(items,index1) in item.choiceIpList" :key="index1"
                           v-if="(item.choiceIpList.length > 3 && index1 < 2) || item.choiceIpList.length < 4">
                            IP地址：{{items.ip}}</p>
                        <p v-if="item.choiceIpList.length > 3">...</p>
                    </div>
                </li>
                <li class="li-box" @click="selfSysVisible=true">
                    <i class="iconfont icon-plus"></i>
                    <p>
                        新增一个自建系统
                    </p>
                </li>
            </ul>
            <div class="text-center"
                 v-if="!offLine&&list[0]&&list.length>3&&orderDetail&&orderDetail.selfSysParam&&orderDetail.selfSysParam[0]">
                <el-link type="primary" :underline="false" v-if="!selfSysShowMore" @click="showChange">点击显示全部</el-link>
                <el-link type="primary" :underline="false" v-else @click="showChange">点击收起全部</el-link>
            </div>
        </div>
        <!--数据库-->
        <div v-if="dbFlag">
            <ul class="ul-box">
                <li v-for="(item,index) in dataList[0]" :key="item.dbId" v-if="index <5 || (index >=5&&show1)">
                    <el-checkbox v-model="item.checked" :checked="checked" class="checkbox"
                                 @change="handChange(index)"></el-checkbox>
                    <span><b>{{item.dbDesc}}</b></span>
                    <div class="ip-a">
                    </div>
                    <div class="ip-b">
                        <p>ip地址：{{item.dbIp}}</p>
                        <p>端口：{{item.dbPort}}</p>
                        <p>类型：{{item.dbType}}</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="text-center" v-if="dataList[0]&&dataList[0].length>5&&!offLine">
            <el-link type="primary" :underline="false" v-if="!show1" @click="showChange">点击显示全部</el-link>
            <el-link type="primary" :underline="false" v-else @click="showChange">点击收起全部</el-link>
        </div>

        <dialog-msk :show.sync="selfSysVisible" :width="'1000px'" :toBody="false" :title="'新增自建系统'" @cancel="close">
            <div slot="footer" class="text-center">
                <span slot="footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </span>
            </div>
            <self-add :inside="true" ref="selfAdd"></self-add>
        </dialog-msk>
        <look :show.sync="selfSysIpVisible" @save="ipSave" :toBody="false" :ipLists.sync="appIpList"
              :title="currentIp"></look>
        <div class="message resourceInfoBox" v-if="resourceMsg">
            <p>资源信息</p>
            <div class="resourceInfo">
                <div class="p">
                    <p>
                        {{resName}}
                    </p>
                    <span>资料来源：{{resSourceDept}}</span>
                </div>
            </div>
            <div class="checkMsg">
                <el-checkbox-group v-model="List1">
                    <el-checkbox class="check1" v-for="item in checkBox" :label="item" :key="item.id">
                        {{item.englishName}}
                    </el-checkbox>
                </el-checkbox-group>
                <!--                <div class="check1" v-for="(item,index) in checkBox" :key="index">-->
                <!--                    <el-checkbox v-model="item.checked" :checked="item.checked" :disabled="disabled"-->
                <!--                                 @change="handleCheckAllChange(item.checked)">-->
                <!--                        {{item.chineseName}}-->
                <!--                    </el-checkbox>-->
                <!--                </div>-->
            </div>
        </div>
        <div class="message" v-if="orderDetail">
            <p v-if="table">信息确认</p>
            <table-example :data="resTable" :tableColumn="header" class="mt20" v-if="table">
            </table-example>

            <el-form class="form-common mt20" :model="resDetail" :rules="rules" ref="ruleForm"
                     size="small" :label-position="'top'">
                <el-form-item label="联系人：" prop="contactName">
                    <el-input v-model="resDetail.contactName" class="input" size="small"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" prop="contactTel">
                    <el-input v-model="resDetail.contactTel" class="input" size="small"></el-input>
                </el-form-item>
                <el-form-item label="申请说明：" prop="remark">
                    <el-input v-model="resDetail.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 4}"
                              size="small"></el-input>
                </el-form-item>
                <el-form-item label="相关文件提交：">
                    <upload :fileList.sync="fileList" :multiple="true"></upload>
                </el-form-item>
            </el-form>

            <div class="text-center mt20">
                <el-button size="small" type="primary vast" @click="submit">提交申请</el-button>
            </div>
        </div>

    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import upload from '../../components/upload'
    import look from '../../components/look'
    import dialogMsk from '../../components/dialog'
    import page from '../../components/pagination'
    import selfAdd from '../manager/self-built-add'

    export default {
        data() {
            return {
                header: [
                    {
                        prop: 'resName',
                        label: '名称',
                        minWidth: '60%',
                        align: 'center'
                    },
                    {
                        prop: 'resSourceDept',
                        label: '提供单位',
                        minWidth: '40%',
                        align: 'center'
                    }
                ],
                deptList: [
                    {
                        value: 1,
                        label: '用户主要所属部门'
                    }
                ],
                deptType: '',
                fileList: [], // 文件提交
                file: [], // 文件提交id集
                contactName: '', // 联系人
                contactTel: '', // 联系电话
                remark: '', // 申请说明
                selfSysIpVisible: false, // 显示自建系统ip集弹窗
                selfSysVisible: false, // 显示自建系统弹窗
                list: [], // 自建系统
                selfSysShowMore: false,
                flag: false,
                appIpList: [],
                currentIp: null,
                loading: false,
                applyNumChild: '',
                orderDetail: null,
                offLine: false,
                id: '',
                resDetail: null,
                resTable: [], // 资源信息
                rules: {
                    contactName: [
                        {required: true, message: '请输入联系人', trigger: 'blur'}
                    ],
                    contactTel: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入申请说明', trigger: 'blur'}
                    ]
                },
                noDbData: false,
                resourceMsg: false,
                dbFlag: false,
                dataList: [],
                collectionSituation: '',
                checkBox: [],
                table: false,
                resType: '',
                offLineFlag: false,
                resName: '',
                resSourceDept: '',
                disabled: '',
                show1: false,
                SubList: [],
                dataListCheckId: [],
                checkList: [],
                resourceList: [],
                rdDbAppList: [],
                rdDbDict: [],
                arr: [],
                checked: false,
                dbChecked: false,
                offLineChecked: false,
                checkedBox: [],
                resId: '',
                List1: [],
                item: this.checkedBoxlet,
                List2: [],
                checkId: [],
                dataListCheck: [],
                ipList: [],
                ipListBox: [],
                valList: [],
                valListBox: []

            }
        },
        mounted() {
            if (this.$route.query.applyNumChild) this.applyNumChild = this.$route.query.applyNumChild
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.$route.query.offLine) this.offLine = JSON.parse(this.$route.query.offLine)
            this.getData()
        },
        update() {
        },
        watch: {
            resDetail(data) {
                this.fileList = data.fileInfo || []
                this.deptList[0].label = data.applyDeptName
                this.deptType = data.applyDeptName
            }
        },
        methods: {
            //  待确认订单明细
            getData() {
                this.loading = true
                let url = '/rdResourceApplicationDetail/selectResApplyDetails'
                if (this.offLine) url = '/rdResForOnline/selectOnlineDetail'
                this.$http.get(url, {
                    applyNumChild: this.applyNumChild,
                    id: this.id
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.orderDetail = result.data
                        this.resDetail = result.data.resDetailParam || result.data.onlineParam
                        this.resType = this.resDetail.resType
                        this.resName = this.resDetail.resName
                        this.resSourceDept = result.data.dirParam[0].resSourceDept || result.data.resDirParam.resSourceDept
                        this.collectionSituation = result.data.dirParam[0].collectionSituation || result.data.resDirParam.collectionSituation
                        if (this.resType === 3) {
                            if (this.collectionSituation === 1) {
                                this.offLineFlag = false
                                this.resourceMsg = true
                                this.dbFlag = true
                                this.table = false
                                this.dataList.push(result.data.dbDictsParam || result.data[0].dbDictsParam)
                                this.rdDbDict.push(result.data.rdDbDict || result.data[0].rdDbDict)
                                for (let i = 0; i < this.dataList[0].length; i++) {
                                    this.rdDbDict.forEach((item, index) => {
                                        if (this.dataList[0][i].dbId === item.dbId) {
                                            this.dataList[0][i].checked = true
                                        }
                                    })
                                }
                            } else {
                                this.offLineFlag = false
                                this.resourceMsg = true
                                this.dbFlag = false
                                this.table = false
                            }
                        } else {
                            this.resourceMsg = false
                            this.table = true
                            this.offLineFlag = true
                            this.dbFlag = false
                        }

                        if (this.collectionSituation === 1) {
                            if (this.resType === 3) {
                                this.checkBox = result.data.rdResDataItemList
                                this.disabled = false
                                this.rdDbAppList = result.data.rdDbAppList || result.data[0].rdDbAppList
                                for (let i = 0; i < this.checkBox.length; i++) {
                                    this.rdDbAppList.forEach((item, index) => {
                                        if (this.checkBox[i].id === item.itemId) {
                                            this.List1.push(this.checkBox[i])
                                        }
                                    })
                                }
                            }
                        } else {
                            if (this.resType === 3) {
                                this.checkBox = result.data.rdResDataItemList || result.data[0].rdResDataItemList
                            }
                        }
                        if (this.offLine) {
                            this.resTable.push(result.data.resDirParam)
                        } else {
                            this.resTable = result.data.dirParam
                        }
                        if (result.data.selfSysParam && result.data.selfSysParam[0]) {
                            this.getList()

                        }
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            handChange(index) {
                if (this.dataList[0][index].checked === true) {
                    this.checked = true
                } else {
                    this.checked = false
                }
            },
            getList() {
                this.loading = true
                this.$http.get('/deptAdmin/getAppList').then(result => {
                    this.loading = false
                    if (result.success) {
                        for (let j = 0; j < result.data.length; j++) {
                            // this.orderDetail.selfSysParam.forEach((item, index) => {
                            //     if (result.data[j].sysCode === item.sysCode) {
                            //         if (result.data[j].ipList && result.data[j].ipList[0]) {
                            //             result.data[j].choiceIpList = result.data[j].ipList.map(x => {
                            //                 return {...x, checked: true}
                            //             })
                            //             result.data[j].checked = true
                            //         }
                            //     }
                            // })
                            // console.log(result.data[j].ipList)
                            // console.log(this.orderDetail.selfSysParam[1].ip.split(','))
                            // 获取ip弹框里选中的值
                            result.data[j].choiceIpList = []
                            this.orderDetail.selfSysParam.forEach((item, index) => {
                                if (result.data[j].sysCode === item.sysCode) {
                                    for (let i = 0; i < result.data[j].ipList.length; i++) {
                                        this.ipList = item.ip.split(',')
                                        result.data[j].ipList[i].checked = false
                                        result.data[j].checked = true
                                        this.ipList.map(x => {
                                            if (result.data[j].ipList[i].ip === x) {
                                                result.data[j].ipList[i].checked = true
                                                result.data[j].choiceIpList.push(result.data[j].ipList[i])
                                            }
                                        })
                                    }
                                }
                            })
                            if (!result.data[j].choiceIpList && result.data[j].ipList && result.data[j].ipList[0]) {
                                result.data[j].choiceIpList = result.data[j].ipList
                                result.data[j].choiceIpList.map(x => {
                                    x.checked = false
                                })
                            } else if (!result.data[j].choiceIpList && (!result.data[j].ipList || !result.data[j].ipList[0])) {
                                result.data[j].choiceIpList = []
                            }
                        }
                        let list1 = result.data.filter(x => {
                            return x.checked
                        }), list2 = result.data.filter(x => {
                            return !x.checked
                        }), list3 = [...list1, ...list2]
                        if (this.list && this.list[0]) {
                            this.list.map(x => {
                                list3.map(y => {
                                    if (x.sysCode === y.sysCode && x.checked) y.checked = true
                                })
                            })
                        }
                        this.list = [...list3]
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            submit() {
                let appList = [], url = '/rdResourceApplicationDetail/updateApplyDetail'
                this.dataListCheck = []
                this.dataListCheckId = []
                if (!this.offLine && this.resType === 3) {
                    for (let i = 0; i < this.dataList[0].length; i++) {
                        if (this.dataList[0][i].checked) {
                            this.dataListCheck.push(this.dataList[0][i].dbId)
                        }
                    }
                }
                if (this.fileList && this.fileList[0]) {
                    for (let i = 0; i < this.fileList.length; i++) {
                        this.file.push(this.fileList[i].id)
                    }
                }
                if (this.orderDetail.selfSysParam && this.orderDetail.selfSysParam[0]) {
                    for (let j = 0; j < this.list.length; j++) {
                        if (this.list[j].checked) {
                            appList.push({
                                sysName: this.list[j].sysName,
                                sysCode: this.list[j].sysCode,
                                ip: this.list[j].choiceIpList.map(item => item.ip).join(','),
                                ipId: this.list[j].choiceIpList.map(item => item.id).join(',')
                            })
                        }
                    }
                }
                if (!appList[0] && this.resType !== 3) {
                    this.$method.messageBox('alert', '请选择自建系统')
                    return false
                }
                if (!this.dataListCheck[0] && !this.offLine && this.resType === 3) {
                    this.$method.messageBox('alert', '请选择数据库')
                    return false
                }
                if (this.dataListCheck.length >= 2) {
                    this.$method.messageBox('alert', '只能选择一个数据源')
                    return false
                }
                for (let i = 0; i < this.List1.length; i++) {
                    this.checkId.push(this.List1[i].id)
                    this.SubList.push({
                        resId: this.id,
                        dbId: this.dataListCheck.join(','),
                        itemId: this.List1[i].id,
                        cname: this.List1[i].chineseName,
                        ename: this.List1[i].englishName,
                        fieldType: this.List1[i].fieldType,
                        fieldLength: this.List1[i].fieldLength,
                        keywords: this.List1[i].keywords,
                        fieldAccuracy: this.List1[i].fieldAccuracy
                    })
                }
                if (this.offLine) {
                    url = '/rdResForOnline/updateApplyOnline'
                }
                this.validate('ruleForm', () => {
                    this.$http.post(url, {
                        contactName: this.resDetail.contactName,
                        contactTel: this.resDetail.contactTel,
                        remark: this.resDetail.remark,
                        deptType: this.deptType,
                        enclosure: this.file.join(','),
                        orderApps: appList,
                        id: this.id,
                        // dbId: String(this.dataListCheck),
                        itemId: this.checkId.join(','),
                        dbApps: this.SubList,
                        // orderNo: this.orderNo,
                        // orderItemNo: this.orderDetail.orderItemNo,
                        state: this.resDetail.state
                    }).then(result => {
                        if (result.success) {
                            this.SubList = []
                            this.resourceList = []
                            this.$emit('upload')
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            openIp(item) {
                this.selfSysIpVisible = true
                this.currentIp = item
                let list1 = item.ipList
                this.appIpList = list1
                // console.log(this.appIpList)
                for (let i = 0; i < this.appIpList.length; i++) {
                    this.valList.forEach((item) => {
                        if (this.appIpList[i].ip === item.ip) {
                            this.appIpList[i].checked = true
                        } else {
                            this.appIpList[i].checked = false
                        }
                    })
                }
                for (let i = 0; i < this.valList.length; i++) {
                    this.valList[i].checked = true
                }
            },
            ipSave(val) {
                this.valList = [...val]
                val.forEach((item) => {
                    item.checked = true
                })
                if (val[0]) {
                    this.currentIp.choiceIpList = val
                    this.selfSysIpVisible = false
                } else {
                    this.$message.closeAll()
                    this.$message.warning({
                        message: '请至少选择一个ip',
                        showClose: true
                    })
                }
            },
            close() {
                this.$refs.selfAdd.ruleForm = {
                    name: '',
                    remark: ''
                }
                this.$refs.selfAdd.ipList = []
                this.$refs.selfAdd.loading = false
                this.selfSysVisible = false
            },
            save() {
                let _this = this
                this.$refs.selfAdd.add(() => {
                    this.getList()
                    _this.close()
                })
            },
            showChange() {
                this.selfSysShowMore = !this.selfSysShowMore
            }
        },
        components: {
            tableExample,
            upload,
            look,
            dialogMsk,
            page,
            selfAdd,
            subBox,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .resourceInfoBox {
        .resourceInfo {
            background-color: #eee;
            padding: 20px;
            padding-top: 0;

            .p {
                color: #444;
                border-bottom: 1px solid #ccc;

                p {
                    color: #444;
                    font-size: 18px;
                }

                span {
                    line-height: 30px;
                }
            }
        }

        .checkMsg {
            background-color: #eee;
            padding: 20px;
            padding-top: 0;

            .check1 {
                width: 200px;
                line-height: 40px;
                display: inline-block;
            }
        }
    }

    .box {
        .department {
            padding: 36px 30px;
            margin: 30px 0;
            background-color: #fff;

            .select {
                width: 460px;
                height: 50px;
            }
        }

        ul {
            overflow: hidden;

            li {
                float: left;
                width: 24%;
                height: 255px;
                margin-right: 1.3%;
                margin-bottom: 30px;
                padding: 22px 30px;
                padding-bottom: 0;
                background-color: #fff;

                .checkbox {
                    width: 16px;
                    height: 16px;
                }

                span {
                    font-size: 20px;
                    color: #333;
                    padding-left: 5px;
                }

                .ip-a {
                    margin-top: 10px;
                    border-bottom: 1px solid #EFEFEF;
                    padding-bottom: 20px;

                    .button {
                        border: none;
                        background-color: #fff;
                        color: #4995F4;
                        margin-left: 30px;
                    }

                    span {
                        font-size: 16px;
                    }
                }

                .ip-b {
                    padding-top: 15px;

                    p {
                        font-size: 14px;
                        color: #999;
                        padding: 4px;
                    }

                }

                &:nth-child(4n) {
                    margin-right: 0;
                }
            }

            .li-box {
                text-align: center;
                color: #dcdcdc;
                font-size: 16px;
                padding-top: 57px;

                i {
                    font-size: 65px;
                }
            }

            .built-info {
                .line {
                    margin-bottom: 20px;

                    > * {
                        display: inline-block;
                        max-width: 900px;
                    }

                    label {
                        float: left;
                        width: 150px;
                        text-align: right;
                        margin-right: 15px;
                        line-height: 40px;
                        font-size: 16px;
                    }

                    .el-link {
                        line-height: 40px;
                    }
                }
            }

            .built-address {
                margin-top: 30px;
            }
        }

        .message {
            margin-top: 30px;
            /*height: 14.16rem;*/
            background-color: #fff;
            padding: 50px 40px;
            padding-top: 0;

            p {
                padding-top: 50px;
                padding-bottom: 20px;
            }

            .input {
                width: 460px;
            }

            .logo {
                margin-left: 150px;
                margin-right: -100px;
                width: 50px;
                height: 22px;
                float: left;
            }
        }

        .btn {
            width: 200px;
            height: 50px;
            margin-top: 100px;
            margin-left: 470px;
        }

    }

</style>
